<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>运营数据报告分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../js/layui/css/layui.css">
    <!-- 引入对应模块的css -->
    <link rel="stylesheet" href="../css/gzhOperation.css">
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <top-bar ref="topbar"></top-bar>
        <!-- 开始 -->
        <div class="displayCenter">
            <!-- 左边导航 -->
            <div class="leftBox">
                <left-site></left-site>
            </div>
            <div class="pageContent">
                <section class="displayBetween title-weizhi">
                    <div>您当前所在位置：公众号名称>公众号信息</div>
                    <div> <a class='color337AB7-a'> 公众号绑定教程</a> <img src="../img/gzhInfo01.png"/> </div>
               </section> 
               <div class="fffBackground">
                    <section class="topTabber">
                            <span v-for="(ht,i) in ['今日实时指标','昨日关键指标']" @click="topTabber(i)" class="commonSpanBtn" :class="{'activeBtn':currenIndex==i}">{{ht}}</span>
                    </section>

                    <section class="collectData displayBetween">
                        <div class="collectData-part ">
                            <div class="part-imgBox"><img src="../img/gzhOperation01.png" style="width:20px;height:20px;vertical-align:sub;" /> 粉丝</div>
                            <div class="part-data displayAround">
                                <section style="text-align:center">
                                    <h3>8</h3>
                                    <p>新增关注</p>
                                </section>
                                <section>
                                    <h3>8</h3>
                                    <p>取消关注</p>
                                </section>
                                <section>
                                    <h3>8</h3>
                                    <p>净增关注</p>
                                </section>
                                <section>
                                    <h3>8</h3>
                                    <p>总粉丝数</p>
                                </section>

                            </div>
                        </div>
                        <div class="collectData-part">
                            <div class="part-imgBox"><img src="../img/gzhOperation02.png" style="width:28px;height:28px;vertical-align:top;"/>文章</div>
                            <div class="part-data displayAround">
                                    <section style="text-align:center">
                                        <h3>8</h3>
                                        <p>总阅读数</p>
                                    </section>
                                    <section>
                                        <h3>8</h3>
                                        <p>总分享数</p>
                                    </section>
                                    <section>
                                        <h3>8</h3>
                                        <p>总留言数</p>
                                    </section>
                                    <section>
                                        <h3>8%</h3>
                                        <p>头条阅读率</p>
                                    </section>
    
                                </div>
                        </div>

                    </section>
                    <section class="lineCharts">
                            <section class="charts-title">
                                    <h1>时段数据分析</h1>
                                    <div>
                                        <span @click="chooseDayLine(index)" :class="{'activeBtn':currenIndex2==index}"
                                            v-for="(item,index) in ['最近三十天','最近七天']" :key="index"
                                            style="display:inline-block;width:99px;text-align:center;line-height:30px;border-radius:2px;border:1px solid #D7D7D7;cursor:pointer;">
                                            {{item}}
                                        </span>

                                        <!-- <select
                                            style="width:222px;line-height:30px;height:30px;text-align:center;border-radius:2px;border:1px solid #D7D7D7;padding-left:34px;outline:none;">
                                            <option>2019-7-10至2019-8-9</option>
                                            <option>2019-7-10至2019-8-9</option>
                                        </select> -->
                                        <input readonly style="display:inline-block;width:222px;line-height:30px;height:30px;text-align:center;border-radius:2px;border:1px solid #D7D7D7;outline:none;" type="text" class="layui-input" id="layui-date" placeholder=" 请选择起止日期 ">
            
                                        <p style="float:right" style="color:#333333">
                                            最近30天数据统计：
                                            新增关注 <span style="color:#FF9933;font-size:16px;">1522</span> 人，
                                            取消关注<span style="color:#669900;font-size:16px;">101</span>人，
                                            净增长<span style="color:#CC0000;font-size:16px;">421</span>人,
                                            累计阅读 <span style="color:#330099;font-size:16px;">896</span>次
                                        </p>
                                    </div>
                            </section>
                            <section class="charts-cont">
                               <div id="chartLine" style="height: 330px;width:100%"></div>
            
                            </section>
                    </section>

                    <section class="source-data displayCenter">
                        <div class="source-data-left">
                            <section class="source-data-head">
                                <p style="line-height:40px;font-weight:bold;color:#333333;font-size:16px;">新用户来源分析</p>
                                <div>
                                        <span @click="chooseDaySource1(index)" :class="{'activeBtn':currenIndex3==index}"
                                            v-for="(item,index) in ['最近三十天','最近七天']" :key="index"
                                            style="display:inline-block;width:99px;text-align:center;line-height:30px;border-radius:2px;border:1px solid #D7D7D7;cursor:pointer;">
                                            {{item}}
                                        </span>
                                        <input readonly style="display:inline-block;width:222px;line-height:30px;height:30px;text-align:center;border-radius:2px;border:1px solid #D7D7D7;outline:none;" type="text" class="layui-input" id="layui-date2" placeholder=" 请选择起止日期 ">
            
                                    </div>
                            </section>
                            <div id="chartsCircleLeft" style="height:380px;width:506px;">
                            </div>
                        </div>
                        <div class="source-data-right">
                            <section class="source-data-head">
                                    <p style="line-height:40px;font-weight:bold;color:#333333;font-size:16px;">阅读来源分析</p>
                                    <div>
                                        <span @click="chooseDaySource2(index)" :class="{'activeBtn':currenIndex4==index}"
                                            v-for="(item,index) in ['最近三十天','最近七天']" :key="index"
                                                style="display:inline-block;width:99px;text-align:center;line-height:30px;border-radius:2px;border:1px solid #D7D7D7;cursor:pointer;">
                                                {{item}}
                                        </span>
                                        <input readonly style="display:inline-block;width:222px;line-height:30px;height:30px;text-align:center;border-radius:2px;border:1px solid #D7D7D7;outline:none;" type="text" class="layui-input" id="layui-date3" placeholder=" 请选择起止日期 ">
                    
                                    </div>
                            </section>
                            <div id="chartsCircleRight" style="height:380px;width:506px;">
                            </div>
                        </div>
                    </section>

                    <section class="operationData">
                        <section class="operationData-head">
                            <p style="line-height:40px;font-weight:bold;color:#333333;font-size:16px;">新用户来源分析</p>
                                <div>
                                    <span @click="ChooseOperationData(index)" :class="{'activeBtn':currenIndex5==index}"
                                          v-for="(item,index) in ['最近三十天','最近七天']" :key="index"
                                          style="display:inline-block;width:99px;text-align:center;line-height:30px;border-radius:2px;border:1px solid #D7D7D7;cursor:pointer;">
                                            {{item}}
                                    </span>
                                    <input readonly style="display:inline-block;width:222px;line-height:30px;height:30px;text-align:center;border-radius:2px;border:1px solid #D7D7D7;outline:none;" type="text" class="layui-input" id="layui-date4" placeholder=" 请选择起止日期 ">
                                    <span style="float:right;display:block;width:120px;line-height:30px;text-align:center;margin-right:20px;" class="activeBtn">导出Excel</span>
                                </div>
                        </section>
                        <section style="margin-top: -10px;position: relative;" class="tablePart">
                                <table class="layui-hide" id="operationDatas" lay-filter="user"></table> 
                                <div class="falseTitle">
                                    <section>
                                            全部文章
                                            <img src="../img/arrowDown.png" style="float: right;margin:24px 15px;"/>
                                            <ul>

                                                <li>全部文章</li>
                                                <li>第二条</li>
                                                <li>第三条</li>
                                                <li>第四条</li>
                                                <li>第五条</li>
                                                <li>第六条</li>
                                                <li>第七条</li>
                                                <li>第八条</li>
                                            </ul>
                                    </section>
                                    
                                </div>


                        </section>
                    </section>
              </div>
            </div>
        </div>

    </div>


</body>
<!-- 头部 -->
<script src="../common/top-bar.js"></script>
<!-- 左侧导航栏 -->
<script src="../common/left-site.js"></script>

<script src="../js/public.js"></script>
<script src="../js/layui/layui.js" charset="utf-8"></script>
<script type="text/html" id="barDemo">
    <!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> -->
    <a class="cazuoBtn">编辑</a>
    <a class="cazuoBtn">下载</a>
    <a class="cazuoBtn">数据分析</a>
    <a class="cazuoBtn">删除</a>
</script>
<script type="text/html" id="erweimaImg">
    <img src="{{d.erweimaImg}}"style="width:34px;height:34px" />
</script>
<script>
    layui.use('laydate',function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#layui-date'
            ,range: '至'
            ,format: 'yyyy-MM-dd'
            ,done: function(value, date){
                alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
            }
            ,btns: ['clear','now','confirm']
            ,trigger: 'click' //自动弹出控件的事件，采用click弹出
        });
        laydate.render({
            elem: '#layui-date2'
            ,range: '至'
            ,format: 'yyyy-MM-dd'
            ,done: function(value, date){
                alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
            }
            ,btns: ['clear','now','confirm']
            ,trigger: 'click' //自动弹出控件的事件，采用click弹出
        });
        laydate.render({
            elem: '#layui-date3'
            ,range: '至'
            ,format: 'yyyy-MM-dd'
            ,done: function(value, date){
                alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
            }
            ,btns: ['clear','now','confirm']
            ,trigger: 'click' //自动弹出控件的事件，采用click弹出
        });

        laydate.render({
            elem: '#layui-date4'
            ,range: '至'
            ,format: 'yyyy-MM-dd'
            ,done: function(value, date){
                alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
            }
            ,btns: ['clear','now','confirm']
            ,trigger: 'click' //自动弹出控件的事件，采用click弹出
        });
    })


    layui.use('table', function(){
    var table = layui.table;
  
  //方法级渲染
  table.render({
    elem: '#operationDatas'
    ,url: './ceshi2.json'
    ,cols: [[
       //{checkbox: true, fixed: true},
       {field:'id', title: 'ID', width:0, sort: true, fixed: true,hide:true}
      ,{field:'articleName', title: '全部文章', width:300}
      ,{field:'time', title: '时间', width:140}
      ,{field:'songda', title: '送达人数', width:120,sort: true}
      ,{field:'reading', title: '阅读人数', width:120,sort: true}
      ,{field:'share', title: '分享人数',width:120,sort: true}
      ,{field:'liuyan', title: '留言数',width:120,sort: true}
      ,{field:'openLV', title: '会话打开率', sort: true, width:125}
    ]]
    ,id: 'testReload'
    ,page: {
        layout: ['count','limit',  'prev', 'page', 'next', 'skip'], //自定义分页布局
        prev:'上一页',
        next:'下一页'
    }
    ,height: 540
     ,skin: 'nob'
    ,//even:true
  });
  
//   var $ = layui.$, active = {
//     reload: function(){
//       //var demoReload = $('#demoReload');
      
//       //执行重载
//       table.reload('testReload', {
//         page: {
//           curr: 1 //重新从第 1 页开始
//         }
//         ,where: {
//           key: {
//             id: demoReload.val()
//           }
//         }
//       }, 'data');
//     }
//   };
  
//   $('.demoTable .layui-btn').on('click', function(){
//     var type = $(this).data('type');
//     active[type] ? active[type].call(this) : '';
//   });
});
</script>
<script>

    new Vue({
        el: '#app',
        data: {
            dialogdata: null,
            dialogShow: false,
            currenIndex: 1,
            currenIndex2:1,
            currenIndex3:1,
            currenIndex4:1,
            currenIndex5:1,
            monidata: [
                { time: '2019/8/1', 'scansCount': 100, 'guanzhuCount': 12, 'guanzhuPeople': 88,'pv':156 ,'lv':0.2},
                { time: '2019/8/2', 'scansCount': 300, 'guanzhuCount': 62, 'guanzhuPeople': 18 ,'pv':156,'lv':0.8},
                { time: '2019/8/3', 'scansCount': 200, 'guanzhuCount': 22, 'guanzhuPeople': 58 ,'pv':156,'lv':0.9},
                { time: '2019/8/4', 'scansCount': 546, 'guanzhuCount': 102, 'guanzhuPeople': 188 ,'pv':156,'lv':0.2},
                { time: '2019/8/5', 'scansCount': 600, 'guanzhuCount': 212, 'guanzhuPeople': 108 ,'pv':156,'lv':0.2},
                { time: '2019/8/6', 'scansCount': 400, 'guanzhuCount': 102, 'guanzhuPeople': 68 ,'pv':156,'lv':0.3},
                { time: '2019/8/7', 'scansCount': 380, 'guanzhuCount': 152, 'guanzhuPeople': 188 ,'pv':156,'lv':0.2},
            ],//模拟的折线图数据
        },
        created: function () {
            //public.ceshi()

        },
        mounted: function () {
            //this.$refs['topbar'].ce();
            this.initLineEchart();//渲染折线图
            this.initCircle();//渲染左边甜甜圈
            this.initCircleRight();//渲染右边甜甜圈图
        },
        methods: {
            ChooseOperationData:function(index){
                this.currenIndex5 = index;
            },
            chooseDaySource1:function(index) {
                this.currenIndex3 = index;
            },
            chooseDaySource2:function(index) {
                this.currenIndex4 = index;
            },
            
            topTabber: function (index) {
                this.currenIndex = index;
            },
            chooseDayLine:function (index) {
                this.currenIndex2 = index;
            },
            initLineEchart: function () {
                let Detail = {
                    time:[],//时间
                    scansCount:[],//净增关注
                    guanzhuCount:[],//总粉丝
                    guanzhuPeople:[],//新增关注
                    unfollow:[],//取消关注
                    unfollowProbability:[],//取消关注率
                };
                let moniData = this.monidata;
                let lineChart = document.getElementById('chartLine');
                let myChartLine = echarts.init(lineChart);
                for (let i = 0,l=moniData.length; i<l;i++){
                    Detail.time.push(moniData[i]['time']);
                    Detail.scansCount.push(moniData[i]['scansCount']);
                    Detail.guanzhuCount.push(moniData[i]['guanzhuCount']);
                    Detail.guanzhuPeople.push(moniData[i]['guanzhuPeople']);
                    Detail.unfollow.push(moniData[i]['pv']);
                    Detail.unfollowProbability.push(moniData[i]['lv'])
                }


                let optionLine = {
                    animation: true,//是否开启动画
                    legend: {
                        top: 20,
                        left: 'center',
                        data: ['净增关注', '总粉丝', '新增关注','取消关注','取消关注率'],
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {//指示器当鼠标悬停显示信息指示
                            type: 'cross',//十字准星指示器 ('line' 直线指示器)('shadow' 阴影指示器)('none' 无指示器)
                            label: {//坐标轴指示器的文本标签默认不显示当type为cross自动开启
                                backgroundColor: '#6a7985'
                            }
                        },
                        backgroundColor: 'rgba(0, 0, 0, 0.6)',
                        textStyle: {
                            color: '#fff'
                        },

                        borderWidth: 1,
                        borderColor: '#ccc',
                        padding: 10,
                    },
                    grid: {
                        left: '1%',
                        right: '4%',
                        bottom: '12%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            min: 'dataMin',
                            max: 'dataMax',
                            data: Detail.time,
                            splitLine: {//显示分割线 类似网格
                                show: true,
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',

                        }
                    ],
                    series: [
                        {
                            name: '净增关注',
                            type: 'line',
                            data: Detail.scansCount,
                            //stack: '总',//分区展示
                            symbolSize: 5,
                            symbol: "circle",//设置折现点为实心圆点
                            // areaStyle: {//堆叠图区域颜色
                            //     color: '#abd9cd'
                            // },
                            //smooth: true,//是否平滑
                            lineStyle: {//折线段的样式
                                color: '#FF9933'
                            },
                            itemStyle: {//折现拐点的样式
                                color: '#FF9933',
                                borderType: 'solid',
                                borderColor: '#FF9933',

                            }
                        },
                        {
                            name: '总粉丝',
                            type: 'line',
                            data: Detail.guanzhuCount,
                            //stack: '总',//分区展示
                            symbolSize: 5,
                            symbol: "circle",
                            // areaStyle: {
                            //     color: '#cae5fd'
                            // },
                            lineStyle: {//折线段的样式
                                color: '#87CEFA',
                            },
                            itemStyle: {//折现拐点的样式
                                color: '#87CEFA',
                                borderType: 'solid',
                                borderColor: '#87CEFA',

                            }
                        },
                        {
                            name: '新增关注',
                            type: 'line',
                            data: Detail.guanzhuPeople,
                            //stack: '总',//分区展示
                            symbolSize: 5,
                            symbol: "circle",
                            // areaStyle: {
                            //     color: '#cae5fd'
                            // },
                            lineStyle: {//折线段的样式
                                color: '#DA70D6'
                            },
                            itemStyle: {//折现拐点的样式
                                color: '#DA70D6',
                                borderType: 'solid',
                                borderColor: '#DA70D6',

                            }
                        },
                        {
                            name: '取消关注',
                            type: 'line',
                            data: Detail.unfollow,
                            //stack: '总',//分区展示
                            symbolSize: 5,
                            symbol: "circle",
                            // areaStyle: {
                            //     color: '#cae5fd'
                            // },
                            lineStyle: {//折线段的样式
                                color: '#6ec729'
                            },
                            itemStyle: {//折现拐点的样式
                                color: '#6ec729',
                                borderType: 'solid',
                                borderColor: '#6ec729',

                            }
                        },
                        {
                            name: '取消关注率',
                            type: 'line',
                            data: Detail.unfollowProbability,
                            //stack: '总',//分区展示
                            symbolSize: 5,
                            symbol: "circle",
                            // areaStyle: {
                            //     color: '#cae5fd'
                            // },
                            lineStyle: {//折线段的样式
                                color: '#330099'
                            },
                            itemStyle: {//折现拐点的样式
                                color: '#330099',
                                borderType: 'solid',
                                borderColor: '#330099',

                            }
                        },

                    ]

                };
                myChartLine.setOption(optionLine, true);
           },

            initCircle: function(){
                let circleLeftChart = document.getElementById('chartsCircleLeft');
                let myChart = echarts.init(circleLeftChart);
                let optionCircle={
                    tooltip:{
                        trigger:'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                        backgroundColor: 'rgb(255, 242, 192)',
                        textStyle: {
                            color: '#333'
                        },
                        // position: function (pos, params, dom, rect, size) {
                        //     // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                        //     var obj = {top: 60};
                        //     obj[['right', 'left'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                        //     return obj;
                        // }
                    },
                    legend: {
                        orient: 'horizontal',
                        //bottom:0,
                        //left:100,
                        x: "center",
                        y: "bottom",
                        width:300,
                        data:['名片分享','搜一搜','支付后关注','其他合计','图文页内公众号名称','扫描二维码','图文页由上角菜单']
                    },
                    series: [
                        {
                            name:'访问来源',
                            type:'pie',
                            radius: ['40%', '60%'],//内外半径
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '12',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:45, name:'名片分享'},
                                {value:100, name:'搜一搜'},
                                {value:4, name:'支付后关注'},
                                {value:35, name:'其他合计'},
                                {value:15, name:'图文页内公众号名称'},
                                {value:154, name:'扫描二维码'},
                                {value:2, name:'图文页由上角菜单'}
                            ]
                        }
                    ],
                    color: ['#44B549', '#36CBCB', "#FFF2C0", '#F2637B', '#B6A2DE', "#FAD337", "#8D98B3"]

                };
                myChart.setOption(optionCircle,true);
            },
            initCircleRight: function(){
                let circleLeftChart = document.getElementById('chartsCircleRight');
                let myChart = echarts.init(circleLeftChart);
                let optionCircle={
                    tooltip:{
                        trigger:'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                        backgroundColor: 'rgb(255, 242, 192)',
                        textStyle: {
                            color: '#333'
                        },
                        // position: function (pos, params, dom, rect, size) {
                        //     // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
                        //     var obj = {top: 60};
                        //     obj[['right', 'left'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                        //     return obj;
                        // }
                    },
                    legend: {
                        orient: 'horizontal',
                        //bottom:0,
                        //left:100,
                        x: "center",
                        y: "bottom",
                        width:300,
                        data:['会话','历史消息','搜一搜','好友转发','其他','朋友圈','看一看']
                    },
                    series: [
                        {
                            name:'访问来源',
                            type:'pie',
                            radius: ['40%', '60%'],//内外半径
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '12',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:100, name:'会话'},
                                {value:10, name:'历史消息'},
                                {value:20, name:'搜一搜'},
                                {value:10, name:'好友转发'},
                                {value:55, name:'其他'},
                                {value:65, name:'朋友圈'},
                                {value:10, name:'看一看'}
                            ]
                        }
                    ],
                    color: ['#44B549', '#36CBCB', "#FFF2C0", '#F2637B', '#B6A2DE', "#FAD337", "#8D98B3"]

                };
                myChart.setOption(optionCircle,true);
            },
        
        
        },
    })
</script>

</html>